import React, {useEffect, useState} from "react";

import {createStyles} from "antd-style"
import SystemInfoApi, {SystemInfo} from "@/api/web/SystemInfoApi.ts";
import {Collapse} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;

            p {
                display: flex;

                span {
                    margin-left: auto;
                }
            }
        `,
    }
})

const SystemInfoCard: React.FC = () => {
    const styles = useStyles().styles;
    const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)

    useEffect(() => {
        SystemInfoApi.getSystemInfo().then(res => {
            setSystemInfo(res.data)
        })
    }, []);

    return (
        <div className={styles.container}>
            <h3 style={{
                fontSize: 17,
                fontWeight: 600,
                textAlign: "center",
                margin: "8px auto",
            }}>系统信息</h3>
            {systemInfo &&
                <Collapse
                    ghost
                    items={[
                        {
                            key: '0',
                            label: "基础信息",
                            styles: {
                                header: {fontSize: 17}
                            },
                            children: (() => {
                                return <>
                                    <p>名称<span>{systemInfo.model}</span></p>
                                    <p>制造商<span>{systemInfo.manufacturer}</span></p>
                                    <p>序列号<span>{systemInfo.serialNumber}</span></p>
                                    <p>硬件UUID<span>{systemInfo.hardwareUUID}</span></p>
                                </>
                            })()
                        },
                        {
                            key: "1",
                            label: "基板信息",
                            styles: {
                                header: {fontSize: 17}
                            },
                            children: (() => {
                                const basBord = systemInfo.baseboard
                                return <>
                                    <p>生产商<span>{basBord.manufacturer}</span></p>
                                    <p>基板型号<span>{basBord.model}</span></p>
                                    <p>序列号<span>{basBord.serialNumber}</span></p>
                                    <p>版本<span>{basBord.version}</span></p>
                                </>
                            })()
                        },
                        {
                            key: "2",
                            label: "固件信息",
                            styles: {
                                header: {fontSize: 17}
                            },
                            children: (() => {
                                const firmware = systemInfo.firmware
                                return <>
                                    <p>生产商<span>{firmware.manufacturer}</span></p>
                                    <p>固件名称<span>{firmware.name}</span></p>
                                    <p>固件描述<span>{firmware.description}</span></p>
                                    <p>版本<span>{firmware.version}</span></p>
                                    <p>固件发布日期<span>{firmware.releaseDate}</span></p>
                                </>
                            })()
                        }
                    ]}
                />}
        </div>
    )
}

export default SystemInfoCard
